import React, {Component} from 'react'
import { Tabs } from 'antd'
import LoginForm from './component/loginForm'
import ForgetForm from './component/forgetForm'
import './style.scss'

interface IProps {
    history:any
}
interface IState {}

const {TabPane } = Tabs
export default class Login extends Component<IProps,IState> {
    private loginProps = [
        {
            type:'input',
            label:"用户名",
            name:"userName",
            rules:[
                {required:true,message:"请输入用户名"}
            ],
            component:{
                placeholder:"请输入用户名",
            },
            style:{borderRadius:"5px"}
        },
        {
            type:'password',
            label:"密码",
            name:"passWord",
            component:{
                placeholder:"请输入密码"
            },
            rules:[
                {required:true,message:"请输入密码"}
            ],
            style:{borderRadius:"5px"}
        }
    ]
    private forgetProps = [
        {
            type:'input',
            label:"用户名",
            name:"userName",
            rules:[
                {required:true,message:"请输入用户名"}
            ],
            component:{
                placeholder:"请输入用户名",
            },
            style:{borderRadius:"5px"}
        },
        {
            type:'password',
            label:"密码",
            name:"passWord1",
            component:{
                placeholder:"请输入密码"
            },
            rules:[
                {required:true,message:"请输入密码"}
            ],
            style:{borderRadius:"5px"}
        },
        {
            type:'password',
            label:"确认密码",
            name:"passWord2",
            component:{
                placeholder:"请再次输入密码"
            },
            rules:[
                {required:true,message:"请输入密码"}
            ],
            style:{borderRadius:"5px"}
        },
    ]
    public goHome = (values:any) => {
        sessionStorage.setItem("user",JSON.stringify(values))    
        this.props.history.replace({pathname:"/index.html"})
    }
    public render() {
        return (
            <div className='login_body'>
                <div className='login_box'>
                    <Tabs defaultActiveKey="1" centered={true} style={{width:"300px"}}>
                        <TabPane tab="登录" key="1">
                            <LoginForm 
                            column={this.loginProps}
                            go={this.goHome}
                            >
                            </LoginForm>
                        </TabPane>
                        <TabPane tab="忘记密码" key="2">
                            <ForgetForm column={this.forgetProps} go={() => {}}>
                            </ForgetForm>
                        </TabPane>
                    </Tabs>
                </div>
            </div>
        )
    }
}